.header{
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
 }
 .header{
     display: flex;
     flex-direction: space-around;
     align-items: center;
     justify-items: center;
     z-index: 99;
     position: fixed;
    top: 0px;
 }
 .header>div:nth-of-type(1){
     flex-shrink: 3;
     /* border: white 1px solid; */
 }
 .header>div:nth-of-type(1)>img{
     width: 150px;
     height: 50px;
 }
 .header>div:nth-child(2){
     flex-grow: 5;
     /* border: white 1px solid; */

 }
 ul{
     display: flex;
     flex-direction: space-around;
     /* align-items: center; */
     /* justify-items: space-around; */
     color:white;
 }
 .header>div:nth-child(2) li{
     list-style-type: none;
     margin: 0 5%;
     margin-top: 10px;

 }
 .login{
     display: flex;
     flex-direction: space-around;
     /* align-items: center; */
     /* justify-items: center; */
     color: white;
     flex-grow: 1;
 }
 .login>div:nth-child(1){
     margin: 0 6%;
     margin: 10px;
 }
 .login>div:nth-child(2){
     margin: 0 1%;
     /* border: white 1px solid; */
     padding: 7px;
     border-radius: 15% 0 0 15% ;
     background-color: rgb(102, 102, 102,0.7);
 }
 .login>div:nth-child(3){
     margin: 0 0px;
     /* border: white 1px solid; */
     padding: 7px;
     border-radius: 0 15% 15% 0 ;
     background-color: rgb(102, 102, 102,0.7) ;
     
 }
 .header2{
     width: 100%;
     height: 60px;
     background-color: rgba(0, 0, 0,0.7);
     display: flex;
     flex-direction: space-around;
     justify-items: center;
     align-items: center;
     color: white;
     display: none;
     z-index: 99;
    position: fixed;
    top: 0px;
 }
 .header2 img{
     width: 40px;
     height: 40px;
     margin-left: 45%;
 }
 .header2>div:nth-child(1){
     flex-grow: 1;
     padding-top: 3%;
     position: relative;
     top: -10px;
     left: 20px;
 }
 .header2>div:nth-child(2){
     flex-grow: 8;
     position: relative;
     top: -20px;
     top: -40px;
 }
 .header2>div:nth-child(3){
     flex-grow: 1;
     position: relative;
     top: -70px;
     left: 97%;
 }
 @media screen and (max-width:1020px) {
    .header{
        display: none;
    }
    .header2{
        display: block;
    }
 @media screen and (max-width:600px) {
    .header2{
        background-color: black;
    }
 }
}